<template>
	<div>
		<div class="message-time-container" v-bind:class="{ checked: sharedPickState.messages.indexOf(message) >= 0 }">
			<p v-if="this.message._showTime" class="time">{{ message._timeStr }}</p>
			<div class="message-content-container" v-bind:class="{ checked: sharedPickState.messages.indexOf(message) >= 0 }">
				<checkbox
					id="checkbox"
					v-if="sharedConversationState.enableMessageMultiSelection"
					type="checkbox"
					class="checkbox"
					:checked="isMessageChecked"
					:value="message"
					placeholder=""
					v-model="sharedPickState.messages"
				/>

				<div class="message-avatar-content-container">
					<!-- 文件的进度条有点特殊，有进度的消息的进度条有点特殊 -->
					<!--          <button>progress...</button>-->
					<LoadingView v-if="message.status === 0 || isDownloading" />
					<i v-if="message.status === 2" class="icon-ion-close-circled" style="color: red" @click="resend" />
					<div class="flex-column flex-align-end">
						<MessageContentContainerView
							:message="message"
							class="message-content-container-view"
							@longpress.native="openMessageContextMenu($event, message)"
						/>
						<QuoteMessageView
							v-if="quotedMessage"
							style="padding: 5px 0; max-width: 80%"
							:message="message"
							:quoted-message="quotedMessage"
							:message-digest="this.message.messageContent.quoteInfo.messageDigest"
							:show-close-button="false"
						/>
					</div>

					<img
						class="avatar"
						@click="onClickUserPortrait(message.from)"
						draggable="false"
						:src="message._from.portrait"
						alt=""
					/>
				</div>
			</div>
			<p v-if="shouldShowMessageReceipt" class="receipt" @click="showMessageReceiptDetail">
				{{ messageReceipt }}
			</p>
		</div>
	</div>
</template>

<script>
	import UserCardView from '@/pages/user/UserCardView'
	import Message from '@/wfc/messages/message'
	import MessageContentContainerView from '@/pages/conversation/message/MessageContentContainerView'
	import store from '@/store'
	import LoadingView from '@/pages/common/LoadingView'
	import wfc from '@/wfc/client/wfc'
	import ConversationType from '@/wfc/model/conversationType'
	import { gte } from '@/wfc/util/longUtil'
	import MessageReceiptDetailView from '@/pages/conversation/message/MessageReceiptDetailView'
	import QuoteMessageView from '@/pages/conversation/message/QuoteMessageView'
	import Config from '@/config'

	export default {
		name: 'NormalOutMessageContentView',
		props: {
			message: {
				type: Message,
				required: true
			}
		},
		data() {
			return {
				sharedConversationState: store.state.conversation,
				sharedPickState: store.state.pick,
				highLight: false,
				quotedMessage: null
			}
		},
		components: {
			QuoteMessageView,
			LoadingView,
			MessageContentContainerView,
			UserCardView
			// TextMessageContentView,
		},
		mounted() {
			if (this.message.messageContent.quoteInfo) {
				let messageUid = this.message.messageContent.quoteInfo.messageUid
				let msg = store.getMessageByUid(messageUid)
				if (!msg) {
					wfc.loadRemoteMessage(
						messageUid,
						(ms) => {
							msg = store._patchMessage(ms[0])
							this.quotedMessage = msg
						},
						(err) => {
							console.log('load remote message error', messageUid, err)
						}
					)
				} else {
					this.quotedMessage = msg
				}
			}
		},
		methods: {
			onClickUserPortrait(userId) {
				store.setCurrentFriend(this.message._from)
				uni.navigateTo({
					url: '/pages/contact/UserDetailPage',
					success: () => {
						console.log('nav to UserDetailPage success')
					},
					fail: (err) => {
						console.log('nav to UserDetailPage err', err)
					}
				})
			},
			resend() {
				wfc.deleteMessage(this.message.messageId)
				wfc.sendMessage(this.message)
			},
			openMessageContextMenu(event, message) {
				this.$parent.$emit('openMessageContextMenu', event, message)
				this.highLight = true
			},

			showMessageReceiptDetail() {
				let conversation = this.message.conversation
				if (conversation.type === ConversationType.Single) {
					return
				}

				let timestamp = this.message.timestamp
				let deliveries = this.sharedConversationState.currentConversationDeliveries
				let readEntries = this.sharedConversationState.currentConversationRead

				if (conversation.type === ConversationType.Group) {
					let groupMembers = wfc.getGroupMemberIds(conversation.target, false)
					if (!groupMembers || groupMembers.length === 0) {
						// do nothing
					} else {
						let receivedUserIds = []
						let readUserIds = []
						let unReceiveUserIds = []
						groupMembers.forEach((memberId) => {
							let recvDt = deliveries ? deliveries.get(memberId) : 0
							let readDt = readEntries ? readEntries.get(memberId) : 0
							if (readDt && gte(readDt, timestamp)) {
								readUserIds.push(memberId)
							} else if (recvDt && gte(recvDt, timestamp)) {
								receivedUserIds.push(memberId)
							} else {
								unReceiveUserIds.push(memberId)
							}
						})
						let readUsers = store.getUserInfos(readUserIds, conversation.target)
						let receivedUsers = store.getUserInfos(receivedUserIds, conversation.target)
						let unreceiveUsers = store.getUserInfos(unReceiveUserIds, conversation.target)

						this.$modal.show(
							MessageReceiptDetailView,
							{
								readUsers: readUsers,
								receivedUsers: receivedUsers,
								unreceiveUsers: unreceiveUsers
							},
							{
								name: 'message-receipt-detail-modal',
								width: 480,
								height: 300,
								clickToClose: true
							},
							{}
						)
					}
				}
			}
		},

		computed: {
			messageReceipt() {
				let conversation = this.message.conversation
				let timestamp = this.message.timestamp
				let receiptDesc = ''
				let deliveries = this.sharedConversationState.currentConversationDeliveries
				let readEntries = this.sharedConversationState.currentConversationRead

				if (conversation.type === ConversationType.Single) {
					let readDt = readEntries ? readEntries.get(conversation.target) : 0
					readDt = readDt ? readDt : 0
					let recvDt = deliveries ? deliveries.get(conversation.target) : 0
					recvDt = recvDt ? recvDt : 0

					if (gte(readDt, timestamp)) {
						receiptDesc = '已读'
					} else if (gte(recvDt, timestamp)) {
						receiptDesc = '已送达'
					} else {
						receiptDesc = '未送达'
					}
				} else {
					let groupMembers = wfc.getGroupMemberIds(conversation.target, false)
					if (!groupMembers || groupMembers.length === 0) {
						receiptDesc = ''
					} else {
						let memberCount = groupMembers.length
						let recvCount = 0
						let readCount = 0

						let receivedUserIds = []
						let readUserIds = []
						let unReceiveUserIds = []
						groupMembers.forEach((memberId) => {
							let recvDt = deliveries ? deliveries.get(memberId) : 0
							let readDt = readEntries ? readEntries.get(memberId) : 0
							if (readDt && gte(readDt, timestamp)) {
								readCount++
								readUserIds.push(memberId)
								recvCount++
							} else if (recvDt && gte(recvDt, timestamp)) {
								recvCount++
								receivedUserIds.push(memberId)
							} else {
								unReceiveUserIds.push(memberId)
							}
						})
						receiptDesc = `已送达 ${recvCount}/${memberCount}，已读 ${readCount}/${memberCount}`
					}
				}
				return receiptDesc
			},

			isDownloading() {
				return store.isDownloadingMessage(this.message.messageId)
			},

			shouldShowMessageReceipt() {
				return (
					this.sharedConversationState.isMessageReceiptEnable &&
					['FireRobot', Config.FILE_HELPER_ID].indexOf(this.message.conversation.target) < 0
				)
			},

			isMessageChecked() {
				return this.sharedPickState.messages.findIndex((m) => m.messageId === this.message.messageId) >= 0
			}
		}
	}
</script>

<style lang="less" scoped>
	.message-time-container {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.message-time-container.checked {
		background-color: #e7e7e7;
	}

	.message-time-container .time {
		width: 100%;
		margin-bottom: 20px;
		text-align: center;
		color: #b4b4b4;
		font-size: 10px;
		background-color: #f3f3f3;
	}

	.message-time-container .receipt {
		margin-right: 70px;
		font-size: 12px;
		margin-top: -10px;
		color: #b4b4b4;
	}

	.message-content-container {
		width: 100%;
		display: flex;
		padding: 10px 20px;
		justify-content: space-between;
		align-items: center;
		position: relative;
	}

	.message-avatar-content-container {
		display: flex;
		max-width: calc(100% - 60px);
		overflow: hidden;
		/*max-height: 800px;*/
		margin-left: auto;
		text-overflow: ellipsis;
		align-items: flex-start;
	}

	.message-avatar-content-container .avatar {
		width: 40px;
		height: 40px;
		border-radius: 3px;
	}

	.message-content-container-view.highlight {
		background-color: #dadada;
		opacity: 0.5;
		--out-arrow-color: #dadada !important;
	}
</style>
